<template>
	<view class="container">

<!-- 下拉框1 -->
		<view class="selectBox1">
			<view class="select-container">
				<view @click="toggleDropdown" class="selected-option">
					{{ selectedOption ? selectedOption : '请选择' }}
					<!-- <uniIcons type="arrowdown" size="20" style="color: red;"></uniIcons> -->
				</view>
				<transition name="fade">
					<view v-if="isDropdownVisible" class="dropdown">
						<view @click="selectOption(option)" v-for="(option, index) in options" :key="index"
							class="option">
							{{ option }}
						</view>
					</view>
				</transition>
			</view>
		</view>
		
		<!-- 下拉框2 -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isDropdownVisible: false,
				selectedOption: null,
				options: ['很感兴趣', '有兴趣', '无反馈', '不感兴趣']
			}
		},
		methods: {
			toggleDropdown() {
				this.isDropdownVisible = !this.isDropdownVisible;
			},
			selectOption(option) {
				this.selectedOption = option;
				this.isDropdownVisible = false;
			}
		}
	}
</script>

<style scoped>
	@import url("./selectMyself.css");
</style>